import { Button, Form, Input, Upload, message, Col, Row, } from 'antd';
import { useEffect } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import Avatar from 'antd/lib/avatar/avatar';
import styles from './userinfoset.less'
import { useModel } from 'umi';

export default function UserInfoSet() {
  const { initialState } = useModel('@@initialState');
    
  useEffect(() => {
    return () => {

    }
  }, [])
  /**
   * 表单布局
   */
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
  };
  /**
   * 表单完成事件
   * @param values 用户信息字段
   */
  const onFinish = async (values: any) => {
    window.console.log(values);

  }
  /**
   * 上传组件参数属性
   */
  const uploadprops = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info: any) {
      if (info.file.status !== 'uploading') {
        window.console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };


  return (
    <div>
      <Row>
        <Col span={16}>
          <Form {...layout} onFinish={onFinish}>
            <Form.Item label="昵称" name="nickname" initialValue={initialState?.currentUser?.nickname}>
              <Input type="text" placeholder="冰阔乐"></Input>
            </Form.Item>
            <Form.Item label="个性签名" name="signature">
              <Input type="text" placeholder="我是一个打工人"></Input>
            </Form.Item>
            <Form.Item label="邮箱" name="email">
              <Input type="email" placeholder="dagongren@qq.com"></Input>
            </Form.Item>
            <Form.Item label="密码" name="password">
              <Input type="password" placeholder="****"></Input>
            </Form.Item>
            <Button type="primary" htmlType="submit"> 更新个人信息 </Button>
          </Form>
        </Col>
        <Col span={8}>
          <div className={styles.upload_headimage}>
            <Avatar src={initialState?.currentUser?.head_image} className={styles.image}></Avatar>
            <div>
              <Upload {...uploadprops} accept="image/jpg">
                <Button icon={<UploadOutlined />}>头像上传</Button>
              </Upload>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  )
}
